/*
VideoJS Default Styles (http://videojs.com)
Version 3.2.0
*/
.video-js,
.video-js *{
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.video-js {
background-color: #000; position: relative; padding: 0;
margin: 0 auto;
font-size: 10px;
vertical-align: middle;
}
.vjs-tech:focus, .vjs-poster:focus{outline: none;}
.video-js .vjs-tech {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video-js, .video-js .vjs-tech {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.video-js:-moz-full-screen { position: absolute; }
/* Fullscreen Styles */
body.vjs-full-window {
padding: 0; margin: 0;
height: 100%; overflow-y: auto;
}
.video-js.vjs-fullscreen {
position: fixed; overflow: hidden; z-index: 1000; left: 0; top: 0; bottom: 0; right: 0; width: 100% !important; height: 100% !important;
_position: absolute;
}
.video-js:-webkit-full-screen {
width: 100% !important; height: 100% !important;
}
/* Poster Styles */
.vjs-poster {
margin: 0 auto; padding: 0; cursor: pointer;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
position: relative; width: 100%; max-height: 100%;
}
/* Text Track Styles */
.video-js .vjs-text-track-display { text-align: center; position: absolute; bottom: 4em; left: 1em; right: 1em;}
.video-js .vjs-text-track {
display: none; color: #fff; font-size: 1.4em; text-align: center; margin-bottom: 0.1em;
background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.50);
}
.video-js .vjs-subtitles { color: #fff; }
.video-js .vjs-captions { color: #fc6; }
.vjs-tt-cue { display: block; }
/* Fading sytles, used to fade control bar. */
.vjs-fade-in, .vjs-fade-out {
visibility: visible !important;
opacity: 1 !important;
-webkit-transition: visibility 0s linear 0s, opacity 0.3s linear;
-moz-transition: visibility 0s linear 0s, opacity 0.3s linear;
-ms-transition: visibility 0s linear 0s, opacity 0.3s linear;
-o-transition: visibility 0s linear 0s, opacity 0.3s linear;
transition: visibility 0s linear 0s, opacity 0.3s linear;
}
.vjs-fade-out {
visibility: hidden !important;
opacity: 0 !important;
-webkit-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
-moz-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
-ms-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
-o-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
transition: visibility 0s linear 1.5s,opacity 1.5s linear;
}
/*-----------------------------------*/
/* Video Player Default Style */
/*-----------------------------------*/
.vjs-controls {
visibility: hidden;
opacity: 0;
position: absolute;
bottom: 0;
left: 0; right: 0;
margin: 0; padding: 0;
height: 2.6em;
color: #fff; border-top: 1px solid #404040;
-webkit-border-radius:0 0 6px 6px;
-moz-border-radius:0 0 6px 6px;
border-radius:0 0 6px 6px;
background: #242424; /* Old browsers */
background: -moz-linear-gradient(top, #242424 50%, #1f1f1f 50%, #171717 100%); /* FF3.6+ */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(50%,#242424), color-stop(50%,#1f1f1f), color-stop(100%,#171717)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* IE10+ */
background: linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* W3C */
}
/* General styles for individual controls. */
.vjs-control {
position: relative; float: left;
text-align: center; margin: 0; padding: 0;
height: 2.6em; width: 2.6em;
}
.vjs-control:focus {outline: 0;}
/* Hide control text visually, but have it available for screenreaders: h5bp.com/v */
.vjs-control-text { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
/* Play/Pause
-------------------------------------------------------------------------------- */
.vjs-play-control { width: 5em; cursor: pointer !important; }
/* Play Icon */
.vjs-paused .vjs-play-control div { width: 15px; height: 17px; background: url('../images/video-js.png'); margin: 0.5em auto 0; }
.vjs-playing .vjs-play-control div { width: 15px; height: 17px; background: url('../images/video-js.png') -25px 0; margin: 0.5em auto 0; }
/* Rewind
-------------------------------------------------------------------------------- */
.vjs-rewind-control { width: 5em; cursor: pointer !important; }
.vjs-rewind-control div { width: 19px; height: 16px; background: url('../images/video-js.png'); margin: 0.5em auto 0; }
/* Volume/Mute
-------------------------------------------------------------------------------- */
.vjs-mute-control { width: 3.8em; cursor: pointer !important; float: right; }
.vjs-mute-control div { width: 22px; height: 16px; background: url('../images/video-js.png') -75px -25px; margin: 0.5em auto 0; }
.vjs-mute-control.vjs-vol-0 div { background: url('../images/video-js.png') 0 -25px; }
.vjs-mute-control.vjs-vol-1 div { background: url('../images/video-js.png') -25px -25px; }
.vjs-mute-control.vjs-vol-2 div { background: url('../images/video-js.png') -50px -25px; }
.vjs-volume-control { width: 5em; float: right; }
.vjs-volume-bar {
position: relative; width: 5em; height: 0.6em; margin: 1em auto 0; cursor: pointer !important;
-moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em;
background: #666;
background: -moz-linear-gradient(top, #333, #666);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#666));
background: -webkit-linear-gradient(top, #333, #666);
background: -o-linear-gradient(top, #333, #666);
background: -ms-linear-gradient(top, #333, #666);
background: linear-gradient(top, #333, #666);
}
.vjs-volume-level {
position: absolute; top: 0; left: 0; height: 0.6em;
-moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em;
background: #fff;
background: -moz-linear-gradient(top, #fff, #ccc);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#ccc));
background: -webkit-linear-gradient(top, #fff, #ccc);
background: -o-linear-gradient(top, #fff, #ccc);
background: -ms-linear-gradient(top, #fff, #ccc);
background: linear-gradient(top, #fff, #ccc);
}
.vjs-volume-handle {
position: absolute; top: -0.2em; width: 0.8em; height: 0.8em; background: #ccc; left: 0;
border: 1px solid #fff;
-moz-border-radius: 0.6em; -webkit-border-radius: 0.6em; border-radius: 0.6em;
}
/* Progress
-------------------------------------------------------------------------------- */
.vjs-progress-control {
position: absolute;
left: 4.8em; right: 4.8em;
height: 1.0em; width: auto;
top: -1.3em;
border-bottom: 1px solid #1F1F1F;
border-top: 1px solid #222;
background: #333;
background: -moz-linear-gradient(top, #222, #333);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#222), to(#333));
background: -webkit-linear-gradient(top, #222, #333);
background: -o-linear-gradient(top, #333, #222);
background: -ms-linear-gradient(top, #333, #222);
background: linear-gradient(top, #333, #222);
}
.vjs-progress-holder {
position: relative; cursor: pointer !important;
padding: 0; margin: 0;
height: 1.0em;
-moz-border-radius: 0.6em; -webkit-border-radius: 0.6em; border-radius: 0.6em;
background: #111;
background: -moz-linear-gradient(top, #111, #262626);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#111), to(#262626));
background: -webkit-linear-gradient(top, #111, #262626);
background: -o-linear-gradient(top, #111, #262626);
background: -ms-linear-gradient(top, #111, #262626);
background: linear-gradient(top, #111, #262626);
}
.vjs-progress-holder .vjs-play-progress,
.vjs-progress-holder .vjs-load-progress{
position: absolute; display: block; height: 1.0em; margin: 0; padding: 0;
left: 0; top: 0;
-moz-border-radius: 0.6em; -webkit-border-radius: 0.6em; border-radius: 0.6em;
}
.vjs-play-progress {
background: #efefef;
background: -moz-linear-gradient(top, #efefef 0%, #f5f5f5 50%, #dbdbdb 50%, #f1f1f1 100%);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%,#efefef), color-stop(50%,#f5f5f5), color-stop(50%,#dbdbdb), color-stop(100%,#f1f1f1));
background: -webkit-linear-gradient(top, #efefef 0%,#f5f5f5 50%,#dbdbdb 50%,#f1f1f1 100%);
background: -o-linear-gradient(top, #efefef 0%,#f5f5f5 50%,#dbdbdb 50%,#f1f1f1 100%);
background: -ms-linear-gradient(top, #efefef 0%,#f5f5f5 50%,#dbdbdb 50%,#f1f1f1 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#f1f1f1',GradientType=0 );
background: linear-gradient(top, #efefef 0%,#f5f5f5 50%,#dbdbdb 50%,#f1f1f1 100%);
}
.vjs-load-progress {
opacity: 0.8;
background: #666;
background: -moz-linear-gradient(top, #666, #333);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#666), to(#333));
background: -webkit-linear-gradient(top, #666, #333);
background: -o-linear-gradient(top, #666, #333);
background: -ms-linear-gradient(top, #666, #333);
background: linear-gradient(top, #666, #333);
}
.vjs-seek-handle {
position: absolute;
width: 16px; height: 16px;
margin-top: -0.3em;
left: 0; top: 0;
background: url('../images/video-js.png') 0 -50px;
-moz-border-radius: 0.8em; -webkit-border-radius: 0.8em; border-radius: 0.8em;
-webkit-box-shadow: 0 2px 4px 0 #000; -moz-box-shadow: 0 2px 4px 0 #000; box-shadow: 0 2px 4px 0 #000;
}
/* Time Display
-------------------------------------------------------------------------------- */
.vjs-time-controls {
position: absolute;
right: 0;
height: 1.0em; width: 4.8em;
top: -1.3em;
border-bottom: 1px solid #1F1F1F;
border-top: 1px solid #222;
background-color: #333;
font-size: 1em; line-height: 1.0em; font-weight: normal;
background: #333;
background: -moz-linear-gradient(top, #222, #333);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#222), to(#333));
background: -webkit-linear-gradient(top, #222, #333);
background: -o-linear-gradient(top, #333, #222);
background: -ms-linear-gradient(top, #333, #222);
background: linear-gradient(top, #333, #222);
}
.vjs-current-time { left: 0; }
.vjs-duration { right: 0; }
.vjs-remaining-time { right: 0; display: none;}
.vjs-time-divider { display:none; }
.vjs-time-control { font-size: 1em; line-height: 1; font-weight: normal;}
.vjs-time-control span { line-height: 25px;}
/* Fullscreen
-------------------------------------------------------------------------------- */
.vjs-secondary-controls { float: right; }
.vjs-fullscreen-control { width: 3.8em; cursor: pointer !important; float: right; }
.vjs-fullscreen-control div { width: 16px; height: 16px; background: url('../images/video-js.png') -50px 0; margin: 0.5em auto 0; }
.vjs-fullscreen .vjs-fullscreen-control div { background: url('../images/video-js.png') -75px 0; }
/* Big Play Button (at start)
---------------------------------------------------------*/
.vjs-big-play-button{display:block;
z-index:2;
position:absolute;
top:50%;
left:50%;
width:8.0em;
height:8.0em;
margin: -41px 0 0 -39px;
text-align:center;
cursor:pointer!important;
}
.vjs-big-play-button:hover{opacity:.8;}
.vjs-big-play-button span{
position:absolute;
top:50%;
left:50%;
display:block;
width:60px;
height:60px;
margin:-30px 0 0 -30px;
background:url('../images/play.png') no-repeat;
}
/* Menu Buttons (Captions/Subtitles/etc.)
-------------------------------------------------------------------------------- */
.vjs-menu-button {
float: right; margin: 0.2em 0.5em 0 0; padding: 0; width: 3em; height: 2em; cursor: pointer !important;
border: 1px solid #111; -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em;
background: #4d4d4d;
background: -moz-linear-gradient(top, #4d4d4d 0%, #3f3f3f 50%, #333333 50%, #252525 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d4d4d), color-stop(50%,#3f3f3f), color-stop(50%,#333333), color-stop(100%,#252525));
background: -webkit-linear-gradient(top, #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
background: -o-linear-gradient(top, #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
background: -ms-linear-gradient(top, #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
background: linear-gradient(top, #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
}
/* Button Icon */
.vjs-menu-button div { background: url('../images/video-js.png') 0px -75px no-repeat; width: 16px; height: 16px; margin: 0.2em auto 0; padding: 0; }
/* Button Pop-up Menu */
.vjs-menu-button ul {
display: none; /* Start hidden. Hover will show. */
opacity: 0.8;
padding: 0; margin: 0;
position: absolute; width: 10em; bottom: 2em; max-height: 15em;
left: -3.5em; /* Width of menu - width of button / 2 */
background-color: #111;
border: 2px solid #333;
-moz-border-radius: 0.7em; -webkit-border-radius: 1em; border-radius: .5em;
-webkit-box-shadow: 0 2px 4px 0 #000; -moz-box-shadow: 0 2px 4px 0 #000; box-shadow: 0 2px 4px 0 #000;
overflow: auto;
}
.vjs-menu-button:focus ul,
.vjs-menu-button:hover ul { display: block; list-style: none; }
.vjs-menu-button ul li { list-style: none; margin: 0; padding: 0.3em 0 0.3em 20px; line-height: 1.4em; font-size: 1.2em; text-align: left; }
.vjs-menu-button ul li.vjs-selected { text-decoration: underline; background: url('../images/video-js.png') -125px -50px no-repeat; }
.vjs-menu-button ul li:focus,
.vjs-menu-button ul li:hover,
.vjs-menu-button ul li.vjs-selected:focus,
.vjs-menu-button ul li.vjs-selected:hover { background-color: #ccc; color: #111; outline: 0; }
.vjs-menu-button ul li.vjs-menu-title {
text-align: center; text-transform: uppercase; font-size: 1em; line-height: 2em; padding: 0; margin: 0 0 0.3em 0;
color: #fff; font-weight: bold;
cursor: default;
background: #4d4d4d;
background: -moz-linear-gradient(top, #4d4d4d 0%, #3f3f3f 50%, #333333 50%, #252525 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d4d4d), color-stop(50%,#3f3f3f), color-stop(50%,#333333), color-stop(100%,#252525));
background: -webkit-linear-gradient(top, #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
background: -o-linear-gradient(top, #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
background: -ms-linear-gradient(top, #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
background: linear-gradient(top, #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
}
/* Subtitles Button */
.vjs-captions-button div { background-position: -25px -75px; }
.vjs-chapters-button div { background-position: -100px -75px; }
.vjs-chapters-button ul { width: 20em; left: -8.5em; /* Width of menu - width of button / 2 */ }
/*-----------------------------------*/
/* Video Player Style 2 */
/*-----------------------------------*/
.video_player video{
-webkit-mask-image: url(/images/mask.png);
-webkit-mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
}
.video_player{
position: relative;
margin-bottom: 30px;
}
.video_player,
.video_player .vjs-poster,
.video_player .video-js{
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.video_player .vjs-fade-out,
.video_player .vjs-controls{
visibility: visible !important;
opacity: 1 !important;
}
.video_player .vjs-big-play-button,
.video_player .vjs-volume-control,
.video_player .vjs-seek-handle{
display: none;
}
.video_player .vjs-controls {
left: 0;
right: 0;
bottom: 0;
margin: 0;
padding: 0;
height: 32px;
border: 0 none;
background: rgb(119,107,94);
background: rgba(119,107,94,0.26);
border-radius: 0 0 6px 6px;
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
}
.video_player .vjs-paused .vjs-play-control div,
.video_player .vjs-playing .vjs-play-control div,
.video_player .vjs-fullscreen-control div,
.video_player .vjs-mute-control div,
.video_player .vjs-mute-control.vjs-vol-0 div{
background-image: url('../images/video_controls.png');
background-repeat: no-repeat;
}
.video_player .vjs-control,
.video_player .vjs-play-control div,
.video_player .vjs-mute-control div,
.video_player .vjs-fullscreen-control div{
height: 32px;
width: 26px;
margin: 0;
}
.video_player .vjs-paused .vjs-play-control div{background-position: 0 0;}
.video_player .vjs-playing .vjs-play-control div{background-position: -26px 0;}
.video_player .vjs-mute-control div{background-position: -52px 0;}
.video_player .vjs-mute-control.vjs-vol-0 div{background-position: -78px 0;}
.video_player .vjs-fullscreen-control div{background-position: -104px 0;}
.video_player .vjs-progress-control {
position: absolute;
top: 12px;
left: 89px;
right: 60px;
width: auto;
height: 6px;
border: 0 none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: rgb(240,232,226);
background: rgba(240,232,226,0.7);
}
.video_player .vjs-progress-holder {
background: transparent;
}
.video_player .vjs-progress-holder .vjs-load-progress,
.video_player .vjs-progress-holder .vjs-play-progress{
height: 6px;
border: 0 none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.video_player .vjs-progress-holder .vjs-play-progress{
background: #e86741;
min-width: 6px;
}
.video_player .vjs-progress-holder .vjs-load-progress {
opacity: 0.4;
background: #fff;
}
.video_player .vjs-time-controls {
position: absolute;
right: 20px;
width: 36px;
top: 9px;
border: 0 none;
font-size: 10px;
height: 12px;
line-height: 12px;
background: transparent;
}
.video_player .vjs-current-time {left: 46px;}
.video_player .vjs-mute-control {float: left;}